<section>
  <d-category-search
    #dCategorySearch
    [category]="category"
    [selectedTags]="selectedTags"
    [defaultSearchField]="defaultSearchField"
    [extendedConfig]="extendedConfig"
    [textConfig]="textConfig"
    [showSearchCategory]="showSearchCategory"
    (searchEvent)="searchEvent($event)"
    (selectedTagsChange)="selectedTagsChange($event)"
  >
  </d-category-search>
  <div *ngIf="finalSearchItems && finalSearchItems.length">
    <p>The categories of the current search:</p>
    <div *ngFor="let item of finalSearchItems">
      <div>{{ item?.label }}: {{ (item?.value)[item.filterKey] || item?.value?.label }}</div>
    </div>
  </div>
  <div *ngIf="finalSearchKey && finalSearchKey.length">
    <p>The current search keyword: {{ finalSearchKey }}</p>
  </div>
</section>

<ng-template #extendTemplate>
  <div class="devui-category-search-icon reset" [class.disabled]="!extendedConfig.save.disabled" (click)="reset()">
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <title>reset status</title>
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M12.7143179,3.28587475 C13.981136,4.55339434 14.6666667,6.24406622 14.6666667,7.99999694 L14.6661599,8.02257215 C14.6655102,8.03703705 14.6642357,8.05147912 14.6623363,8.06585443 L14.6666667,7.99999694 C14.6666667,8.0371769 14.6626086,8.07340903 14.6549111,8.10827457 C14.6517992,8.1222052 14.6480389,8.13632563 14.6436512,8.15029154 C14.6390061,8.1651613 14.6336213,8.17980434 14.6275902,8.19410809 C14.6231995,8.20453649 14.6185439,8.21463293 14.613534,8.22459678 C14.6049463,8.24162018 14.5952425,8.2583947 14.5846307,8.27451859 C14.5792264,8.282804 14.5735765,8.29085725 14.5676615,8.2987751 C14.5571418,8.31280391 14.5460319,8.32617172 14.5342667,8.33892584 C14.5300122,8.343554 14.5251791,8.34859129 14.5202201,8.35355033 L14.5076464,8.36569453 C14.4940828,8.37834683 14.4798146,8.39025348 14.4649071,8.4013492 L14.5202201,8.35355033 C14.4937641,8.38000631 14.465081,8.40287777 14.4347743,8.42216473 C14.4224394,8.42996083 14.4098046,8.43724836 14.3968374,8.44398448 C14.3832773,8.45105337 14.3694473,8.45743098 14.3554103,8.46314429 C14.3412925,8.46891455 14.3266036,8.47413114 14.3116174,8.47866321 C14.2992824,8.48234275 14.2871467,8.4855024 14.2749295,8.48819956 C14.2606866,8.49139588 14.2459756,8.4939711 14.2310588,8.49588898 C14.2147923,8.49795142 14.1986607,8.49923861 14.1825093,8.49974745 L14.1666667,8.49999694 L14.1666667,8.49999694 L14.1394006,8.49925755 C14.1253117,8.49849283 14.1112491,8.49713493 14.0972533,8.49518384 L14.1666667,8.49999694 C14.1273209,8.49999694 14.0890366,8.49545228 14.05231,8.48685924 C14.0384692,8.48357481 14.0248075,8.47976105 14.0112962,8.4753569 C13.9958192,8.47034085 13.9804276,8.46445184 13.9654221,8.45784679 C13.9544183,8.45302561 13.9434536,8.44772707 13.9326545,8.4420051 C13.9165024,8.43339464 13.9009385,8.4240044 13.8859565,8.41382189 C13.8807017,8.41031248 13.8749119,8.40620635 13.8691922,8.40196243 L13.8550466,8.39103641 C13.8474863,8.38500359 13.8401047,8.3787561 13.8329113,8.37230316 L13.8131133,8.35355033 L12.6151133,7.15555033 C12.4198511,6.96028819 12.4198511,6.6437057 12.6151133,6.44844355 C12.7926243,6.27093251 13.0704001,6.25479514 13.2661411,6.40003145 L13.3222201,6.44844355 L13.498767,6.62598997 C13.2544588,5.64420827 12.7478288,4.73400934 12.0071133,3.99288367 C9.79437542,1.78014581 6.20562458,1.78014581 3.99288672,3.99288367 C1.78014071,6.20562968 1.78014071,9.79375159 3.99288672,12.0071102 C6.20562458,14.2198481 9.79437542,14.2198481 12.0071133,12.0071102 C12.2023754,11.8118481 12.5189579,11.8118481 12.7142201,12.0071102 C12.9094822,12.2023724 12.9094822,12.5189549 12.7142201,12.714217 C10.1109579,15.3174791 5.88904209,15.3174791 3.28573101,12.7141681 C0.682525952,10.1102423 0.682525952,5.88903088 3.28577994,3.28577688 C5.88904209,0.682514739 10.1109579,0.682514739 12.7143179,3.28587475 Z"
        ></path>
      </g>
    </svg>
  </div>
</ng-template>
